import Vue from 'vue'
import App from './App.vue'

// 1. 导入vuex模块
import Vuex from 'vuex'

// 2. 对Vuex进行注册，“插件”机制
//    本质是要给Vue创建全局成员
//    Vue.prototype.$store = xxx
//    后续，在业务组件中就可以访问$store了
Vue.use(Vuex)

// 3. 创建Vuex对象，Vuex.Store整体才是"构造函数"
//    对象成员名称store，是自定义的，考虑到后边代码的兼容性，就用store
/*
    const Vuex = {
      Store:function(){}
    }
*/
const store = new Vuex.Store({
  // 配置共享数据,"state"就是固定配置数据的名称，不能自定义
  state: {
    // 数据成员，名称可以自定义，数量不限制
    count: 25,
    count1: 26
    // ……
  },
  // 设置共享数据"修改"机制--同步
  // 业务组件不能直接修改数据，具体要通过vuex进行
  // mutations是固定成员名称，不能自定义，代表对共享数据做修改的
  mutations: {
    // 内部可以声明许多"方法"，针对不同的共享数据做修改的
    // 【state】固定参数，名字可以自定义，但是我们就用这个名字，
    // 可读性比较好，就代表共享数据的"state对象"，因此可以访问共享数据
    // 【data】是形参，代表被修改数据传递的参数，名字可以自定义，用于接收应用层传递过来的数据
    // (mod(10)=======>count=35)
    mod: function (state, data) {
      // 对count做修改
      state.count += data
    }
  },
  // 数据修改--异步方式
  actions: {
    // 修改共享数据的各个方法，数量不限制
    // 【context】是一个形式参数，名称可以自定义，但是我们就用context即可
    //  其代表"$store"对象，因此context可以调用commit方法(当然也可以调用state成员)
    //  【data】形式参数，可以接收应用组件传递来的信息，名字可以自定义
    xiu: function (context, data) {
      // 【异步修改数据要通过commit调用mutations间接修改的】
      // setTimeout() 1秒中之后做修改
      setTimeout(() => {
        context.commit('mod', data)
      }, 1000)
    }
  }
})

Vue.config.productionTip = false

new Vue({
  // 4. 挂载Vuex对象,Vue内部还可以填充名称为store的成员
  store, // 简易成员赋值，完整：store:store
  render: h => h(App)
}).$mount('#app')
